@charset "utf-8";

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Cond.OTF');
    font-weight: normal;
    font-style: normal;
}
body{background: #fafafa url(../../images/contentBg.gif) top left repeat;}

*{margin:0px; padding: 0px; outline: none; outline: 0;}
div,span,p, a{outline: none !important;}
h1,h2,h3,h4,h5,h6{margin: 0px;}
body{font-family: Tahoma, Arial, Sans-serif; position: relative;}
a, a:hover, a:focus{text-decoration: none;}
ul li{list-style: none;}
.clr{clear: both;}

.bottomDashed{border-bottom: 1px dashed #999999;}
.margin5{margin: 5px;}
.hoverUnderline:hover{text-decoration: underline;}

.client-error, .client-warning, .client-success, .client-info{min-height: 35px;}
.client-warning{background: url(../../images/warning.png) 10px 10px no-repeat #fefccb; border-radius: 5px; border: 1px solid #e5db55; padding: 10px 10px 10px 60px; color: #9f9b39;margin-bottom:10px;}
.client-error{background: url(../../images/error.png) 10px 10px no-repeat #ffd2d3; border-radius: 5px; border: 1px solid #df8f90; padding: 10px 10px 10px 60px; color: #871414;margin-bottom:10px;}
.client-success{background: url(../../images/success.png) 10px 10px no-repeat #d4ffcd; border-radius: 5px; border: 1px solid #9adf8f; padding: 10px 10px 10px 60px; color: #48a03a;margin-bottom:10px;}
.client-info{background: url(../../images/info.png) 10px 10px no-repeat #dbecff; border-radius: 5px; border: 1px solid #9fc7f5; padding: 10px 10px 10px 60px; color: #48a03a;}

.text-error h2{color:#a80000;text-shadow:0 1px #fff;font-size:16px;}
.text-success h2{color:#138900;text-shadow:0 1px #fff;font-size:16px;}
.text-info h2{color:#0031bd;text-shadow:0 1px #fff;font-size:16px;}
.text-warning h2{color:#948f00;text-shadow:0 1px #fff;font-size:16px;}
.text-error span, .text-success span, .text-info span, .text-warning span{color:#2f2f2f;font-style:italic;font-size:13px;text-shadow:0 1px #e9e9e9;}

/* Main */

#wrapAll{width: 100%;}


/* Header */
#wrapHeader{width: 100%; background: #fff; z-index: 999;}
#innerHeader{width: 90%; margin: 0px auto;}
h1#logo{width:220px; height: 20px; float: left; margin: 0px 20px 0px 0px; position: absolute; top: 5px; left: 40%; font-size: 15px;}

/* Top navigator */
#topNav{padding: 10px 0px 0px 0px; float: left; font-size: 12px;}
#topNav li{float: left; margin: 0px 10px 0px 0px; text-align: center;}
#topNav li a.spriteA{display: block; margin: 0px auto; width: 56px; height: 56px;}
#topNav li a{text-decoration: underline;}
#topNav li:hover .spriteA{
	-moz-transition: all 0.2s ease-in-out;
    /* WebKit */
    -webkit-transition: all 0.2s ease-in-out;
    /* Opera */
    -o-transition: all 0.2s ease-in-out;
    /* Standard */
    transition: all 0.2s ease-in-out;
}

	/* New */
	#wrapNewNav a{color: #1da5a9;}
	#wrapNewNav:hover a#newNavText{color: #0c7c7f; }
	#newNavImg{background: url(../../images/sprite.png) 0px 0px;}
	#wrapNewNav:hover #newNavImg{background: url(../../images/sprite.png) 0px -56px;}

	/* Hot */
	#wrapHotNav a{color: #d53434;}
	#wrapHotNav:hover a#hotNavText{color: #be0f0f;}
	#hotNavImg{background: url(../../images/sprite.png) -56px 0px;}
	#wrapHotNav:hover #hotNavImg{background: url(../../images/sprite.png) -56px -56px;}

	/* Picture */
	#wrapPicNav a{color: #bf4c92;}
	#wrapPicNav:hover a#picNavText{color: #9c1c6a;}
	#picNavImg{background: url(../../images/sprite.png) -112px 0px;}
	#wrapPicNav:hover #picNavImg{background: url(../../images/sprite.png) -112px -56px;}

	/* Video */
	#wrapVidNav a{color: #336699;}
	#wrapVidNav:hover a#vidNavText{color: #1e5082;}
	#vidNavImg{background: url(../../images/sprite.png) -168px 0px;}
	#wrapVidNav:hover #vidNavImg{background: url(../../images/sprite.png) -168px -56px;}

	/* Story */
	#wrapStoNav a{color: #ee6f30;}
	#wrapStoNav:hover a#stoNavText{color: #f05306;}
	#stoNavImg{background: url(../../images/sprite.png) -224px 0px;}
	#wrapStoNav:hover #stoNavImg{background: url(../../images/sprite.png) -224px -56px;}
	
	/* Upload */
	#wrapUplNav a{color: #eed51b;}
	#wrapUplNav:hover a#uplNavText{color: #d6bd00;}
	#uplNavImg{background: url(../../images/sprite.png) -280px 0px;}
	#wrapUplNav:hover #uplNavImg{background: url(../../images/sprite.png) -280px -56px;}

	
/* Top user login */

#userControl{float: right; box-shadow: 0px 0px 3px #999999; border-radius: 0px 0px 4px 4px; padding: 0px 10px; z-index:999;}
#userControl #login{margin: 0px; line-height: 27px; padding: 0px 0px 0px 20px; background: url(../../images/facebookSmallIcon.png) 0px 6px no-repeat;}
#login a{font-size: 11px;}

/* Main */
#wrapMain{ padding: 10px 0px 20px 0px; }
#innerMain{width: 95%; border-radius: 5px; padding: 10px 10px; margin: 0px auto; position: relative; overflow: hidden; }
.wrapPageTitle{width: 143px; height: 39px; background: url(../../images/sprite.png) 0px -120px; position: absolute; top: -20px; left: 10px;}
#wrapImageSectionTitle{background: url(../../images/sprite.png) -286px -120px no-repeat;}
#wrapUserSectionTitle{background: url(../../images/sprite.png) -143px -159px no-repeat;}
.pageTitle{text-indent: -999px;}

#sectionControl{z-index: 99; width: 980px; height: 31px; line-height: 31px; font-size: 11px; background: url(../../images/sectionControlBg.png) top left repeat-x; border-radius: 3px; border: 1px solid #e7e7e7; padding: 0px 10px; box-shadow: 0px 2px 2px #999;}
#sectionControl .sectionlabel{font-weight: normal; height: 31px; line-height: 31px;}
.btn-myButton{padding: 2px 5px 2px 15px; margin: 0px 0px 3px 0px; font-size: 11px; background: #fff; border-radius: 3px; border: 1px solid #e7e7e7}
.btn .caret{border-top-color: #333; margin: 0px 0px 0px 10px;}
.btn:hover, .btn:focus{color: #666;}
#sectionOption{margin: 0px 10px 0px 0px;}

#rightFbLike{float: right; margin: 5px 0px 0px 0px;}

/* Home page */
#contentIndex{ margin: auto;}
.innerItem{background-color: #FFF;	border-radius:5px;		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);}
.innerItem:hover{box-shadow: 0px 0px 10px #336699;}
.wrapItemImage{position: relative; display: block;}
.wrapInnerItemInfo{padding: 0px;}


.quickPreviewBtn{display: none; text-align: center; position: absolute;}
.innerItem:hover .quickPreviewBtn{display: block;}
.innerBtn{padding: 5px 7px; background: #fafafa; border: 1px solid #eee; font-size: 11px; border-radius: 3px; font-weight: normal; color: #666;}
.innerBtn:hover{background: #336699; color: #fff;}

.item {font-family: 'Roboto Condensed', sans-serif;}
.item h3{margin: 0px 0px 5px 0px; padding:1px}
.item h3 a{font-size: 15px; font-weight: normal; color: #333; line-height: 18px;font-family: 'Roboto Condensed', sans-serif; padding-left:10px; padding-right:10px}
.item  .right{font-size: 13px; font-weight: normal; color: #333; line-height: 18px;font-family: 'Roboto Condensed', sans-serif; padding-left:10px; padding-right:10px}
.item .itemImage{margin: 0px 0px 5px 0px; border-radius: 3px 3px 0px 0px; cursor: -webkit-zoom-in;}
.item p{ padding-left:2px; padding-right:2px; color:#999; font-sze:11px}
.infoMetadata{display: block; float: left; margin: 0px 7px 0px 0px; font-size: 11px; padding: 0px 0px 0px 14px; line-height: 20px; }

/* Left */
#left{width: 70%; margin: 0px 10px 0px 0px; float: left;}

#wrapLoadMoreItems{text-align:center;}
.normalLoadBtn{padding: 5px 15px; background: #336699; box-shadow: 0px 0px 3px #666; border-radius: 4px; border: 1px solid #eee; width: 105px; margin: 0px auto; color: #fff; font-weight: bold; font-size: 11px;}
#loadMoreItemsBtn{display: block; width: 160px; padding: 5px 15px 5px 20px; background: #336699 url(../../images/gridview.png) 14px 5px no-repeat; cursor: pointer;}
#loadMoreItemsBtn:hover, #loadMoreItemsBtn:focus{color: #fff; background: #447eb7 url(../../images/gridview.png) 14px 5px no-repeat;}

/* Right */
#right{width: 290px; float: left; margin: 0px 0px 0px 0px;}
.rightBlock{border-radius: 5px; box-shadow: 0px 0px 5px #999; background: #fff; padding: 10px 0px; margin: 0px 0px 15px 0px; min-height: 300px;}
.rightBlockTitle{background: url(../../images/rightTitleBg.gif) top left repeat; height: 30px; line-height: 30px; color: #7f7f7f; padding: 0px 10px; text-transform: uppercase; font-size: 14px; font-weight: 600;}
.rightBlockTitle a{text-transform: capitalize; font-size: 11px;}
.rightBlockTitle span{font-size: 11px;}
.innerRightBlock{padding: 5px; color: #666;}
.wrapRightImage{float: left; margin: 0px 5px 5px 0px;}
.innerRightBlock h4 a{font-size: 12px;}
.innerRightBlock h4{margin: 0px 0px 5px 0px;}
a.rightItemTitle{color: #000;font-family: 'Roboto Condensed', sans-serif;}
a.rightItemAuthor{color: #336699; font-size: 11px; line-height: 16px; }


/* Footer */
#wrapFooter{width:100%; background: #fff;}
#innerFooter{width: 980px; margin: 0px auto; padding: 10px 0px;}
.wrapBottomNav{float: left; margin: 0px 50px 0px 0px;}
.bottomNavTitle{font-weight: bold; color: #999; font-size: 12px; margin: 0px 0px 5px 0px; text-transform: uppercase;}
.bottomNav{padding: 0px 0px 0px 15px;}
.bottomNav li{padding: 0px 0px 0px 10px; background: url(../../images/liBg.gif) 0px 9px no-repeat;}
.bottomNav li a{font-size: 11px; color: #666;}
	
#rightFooter{position: relative; float: right;}

#wrapCopyright{padding-top: 20px; text-align: left; width: 450px;}
#footerLogo{ margin: 0px 10px 0px 0px;}
#copyright{ font-size: 11px; color: #666666;}
#toTop {bottom: 5px; right: 20px; color: #fff;}

.contentPopup h2{margin: 0px 0px 10px 0px; background: #fbfbfb; padding: 4px; border: 1px solid #eee; border-radius: 3px; width: 96%;}
.contentPopup h2 a{font-size: 14px; font-weight: bold; color: #666; line-height: 24px;}
.leftPopup{width: 620px; float: left; margin: 0px 10px 0px 0px;}
.rightPopup{width: 130px; float: left;}
.leftPopup h2{margin: 0px 0px 10px 0px; background: #fbfbfb; padding: 4px; border: 1px solid #eee; border-radius: 3px;}
.leftPopup h2 a{font-size: 14px; font-weight: bold; color: #666; line-height: 24px;}
.wrap-fb-like-popup{padding: 0px; float: left;}
.rightPopup .commentView a{font-weight: bold;}
.popupControl{width: 728px; height: 36px; z-index: 1500; position: fixed; top: 0px; left: 50%; margin-left: -372px; background: #fbfbfb; border: 1px solid #eee;}
.popupControl .commentView a{font-weight: bold;}
.viewImg{max-width: 688px; margin: 10px auto;}
.popupControl .fb-like{float: left; margin: 0px 7px 0px 0px; overflow: hidden;}
.likePopupLabel{font-size: 11px; color: #336699; font-weight: bold; float: left; line-height: 21px; margin: 0px 5px 0px 0px;}
.scrollable{overflow: scroll}

/* Category */
#sectionControl-sticky-wrapper{margin: 0px 0px 13px 0px; height: 31px;}

/* Detail */
#left #sectionControl{width: 675px;}
#leftFbLike{float: left; margin: 5px 15px 0px 0px;}


#leftDetailInfo{float: left;width: 55%; padding: 5px;}
#leftDetailInfo h2{font-size: 14px; font-weight: bold; color: #336699;}
#rightDetaiInfo  .rightUserItem{float: right; width: 35%; padding: 5px;}
.rankView{width: 85%; background:url(../../images/user_king.png) 0px 4px no-repeat; background-size: 12px 12px;}
#rightDetaiInfo .likeView{float: left;}
#detailContent .scrollable{height: 500px; text-align:center;}
.detailImage{max-width: 670px; text-align: center; margin: 0px 0px 20px 0px; display: inline-block}

/* Multi dropdown menu */
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

.subTittle{margin: 20px 0px 25px 0px;}
#formDisplayAvatar img{padding: 3px; border-radius: 3px; border: 1px solid #eeeeee;}
.myButton{background: #336699; color: #fff;}
#myBreadcrumb{padding: 6px 7px; font-size: 11px; margin-bottom: 10px;}
#myBreadcrumb li a{font-size: 11px;}
.tab-content{padding: 10px; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0px 0px 3px 3px;}

.userActionInfo{background: #fff; border-radius: 5px; padding: 5px; margin: 0px 0px 10px 0px; border: 2px solid #eee;}
.wrapCol{width: 33%; float: left;}
.tab-pane label{font-size: 12px; font-weight: normal; margin-right: 10px;}


.btn:focus{outline: none;}

.userPostForm{}
.userPostForm .btn:focus, .userPostForm .btn:hover{}
#uploadTypeChoosen{padding: 2px 5px;}
.myNormalSelect{ width:300px}
#fileupload .progress{height: auto; margin: 0px;}

form .alert{padding: 6px 25px 6px 6px; margin: 5px 0px;}

#innerHeader .col-md-4{margin: 0px 0px 5px 0px;}
#innerHeader #btnDropdown{margin: 10px 0px 0px 10px; padding: 5px 10px 10px 10px;}
#innerHeader nav{margin: 0px; background: #fff; border: none;}
#innerHeader .yamm-content ul.row-fluid li a{color: #999; font-size: 13px; color: #336699;}
#innerHeader .navbar{z-index: 999;}
.modal-wide {
    width:750px;
}

.wrapInfo{box-shadow: 0 1px 0px 0px #fff inset;
border-radius: 0 0 3px 3px;
padding: 7px 8px 8px;
border-top: 1px solid #e7e7e7;
background-color: #f7f7f7;
position: relative;}
.wrapInfo2{box-shadow: 0 1px 0px 0px #fff inset;
border-radius: 0 0 3px 3px;
padding: 7px 8px 8px;
border-top: 1px solid #e7e7e7;
background-color: #2ecc71;
position: relative;
color:#FFF;

}
.user-posts-preview{margin: 10px 0px; padding: 6px; border: 5px solid #fafafa;}
.leftDetail{background: #fff;}
#detailPopupControl{width:100%; z-index: 999;margin: 0px 10px; border: 1px solid #eee;}
.fb-comments, .fb-comments iframe[style], .fb-comments > span[style] {width: 100% !important;}
.rollHorizontal{max-height: 300px; overflow: auto; overflow-x: hidden; -ms-overflow-x: hidden;}

.blue{color: #336699;}
.icon-small{font-size: 12px;}
.font12{font-size: 12px;}
.font11{font-size:11px;}
.margin-right-10{margin-right: 10px;}
.margin-left-10{ margin-left:10px}
#fileupload label{width: 100px; font-weight: normal; }
#tabImage .fileupload-buttonbar{text-align: center; margin-top: 10px;}
#tabUpload{position: relative;}
#tabUpload .formLoading{position: absolute; top: 0px; left: 0px; display: none;}
.user_profile .formLoading{position: absolute; top: 0px; left: 0px; display: none;}
#wrapLoadMoreItems{display: none; z-index: 999;}
.user_profile{padding: 10px;}
.jumbotron{font-size: 13px; padding: 10px; margin: 10px;}
.loading {display: none;}
#relatedPosts .item{width: 110px;}

<<<<<<< .mine


 @media only screen and (max-width: 321px){
 	.item{width:140px; margin: 5px;}
 }

	@media only screen and (min-width: 322px) and (max-width: 451px){
 	.item{width:140px; margin: 1px;}
 }
 
 @media only screen and (min-width: 452px) and (max-width: 541px){
 	.item{width:165px; margin: 2px;}
 }


=======

@media only screen and (min-width: 950px) {
.item{width:240px; margin: 4px;}
}

@media only screen and (max-width: 950px) {
.item{width:190px; margin: 4px;}
}
>>>>>>> .r139


@media only screen and (max-width: 800px) {
.item{width:140px; margin: 4px;}
}


@media only screen and (max-width: 350px) {
.item{width:120px; margin: 2px;}
}
.modal-dialog img{max-width: 100%; text-align: center;}
.report_post{float: right;}
.report_post a{color: #cc0000; font-size: 11px; font-family: tahoma; text-decoration: underline;}

.detail_popup_controller{width:750px;height: 36px; z-index: 1500; background: #f7f7f7;box-shadow: 0 1px 0px 0px #fff inset;
border-radius: 0 0 3px 3px;
border-top: 1px solid #e7e7e7;margin-bottom:5px}
.head_info{background: #f7f7f7;box-shadow: 0 1px 0px 0px #fff inset;}
.wrap-inner-image{max-height: 500px; overflow: hidden;}
.video_play_icon{display:block; width:60px; height:60px;}
.wrap-inner-image:hover .video_play_icon{opacity: 0.7}


